<template>
	<view class="content">
		<view class="form-view">
			<uni-forms ref="form">
				<uni-forms-item class="form-item" name="userName">
					<input type="text" v-model="userData.userName" placeholder="请输入您的账号" />
				</uni-forms-item>
				<uni-forms-item class="form-item" name="password">
					<input type="password" v-model="userData.password" placeholder="请输入您的密码" />
				</uni-forms-item>
				<button class="reg-btn" hover-class="btn-active" @click="toRegister">登录</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userData: {
				userName: '',
				password: ''
			}
		}
	},
	methods: {
		toRegister() {
			if (this.userData.userName === '' && this.userData.password === '') {
				uni.showToast({
					title: '请先输入账号密码',
					icon: 'none',
					duration: 3000
				})
			} else {
				const data = {
					username: this.userData.userName,
					password: this.userData.password
				}
				this.http({
					method: 'POST',
					url: '/api/reguser',
					data,
				}).then((res) => {
					console.log(res);
				})
			}
		}
	}
}
</script>

<style lang="scss">
.content {
	width: 100vw;
	height: calc(100vh);
	background-color: #eeeeee;
}
.reg-btn {
	color: #fff;
	background-color: #1a73e8;
	&.btn-active {
		background-color: #1c67df;
	}
}
</style>
